<template>
    <div class="scrollScreenList">                        
        <div class="scroll_screen" v-for="screen in scrollScreenList" :key="screen.id">
            <div class="scroll_screen_title">
                <el-row>
                    <el-col :span="6">
                        <span class="scroll_type">{{screen.form.name}}</span>                                                                                         
                    </el-col>                          
                    <el-col :span="13" class="overflowStyle">
                        <label style="overflow: hidden;display: inline-block;color:#909399;">播报字段：</label>
                        <el-tooltip class="item" effect="light" :content="screen.fieldsName" placement="top-start">
                            <span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 70%;">{{screen.fieldsName}}</span>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="5" style="text-align:right">
                        <el-button type="danger" @click.stop="delSenceData(screen.id)" style="border-radius: 20px;padding: 5px 15px;background:#d93025;">删除</el-button>
                        <el-button type="primary" @click.stop="modifiDialog(true,screen)" style="border-radius: 20px;padding: 5px 15px;margin-right:20px;">修改</el-button>
                    </el-col>
                </el-row>  
            </div>
            <div class="scroll_screen_content">
                <el-row>
                    <el-col :span="6">   
                        <label>播报类型：</label>
                        <span>{{screen.form.type}}</span>                                                                                
                    </el-col>                          
                    <el-col :span="6">                              
                        <label>滚动方向：</label>
                        <span>{{screen.form.direction}}</span>
                    </el-col>
                    <el-col :span="6">                               
                        <label>放大比例：</label>
                        <span>{{screen.form.scale}}</span>    
                    </el-col>                        
                </el-row>  
                <el-row>
                    <!-- <el-col :span="6">   
                        <label>每行间距：</label>
                        <span>20px</span>                                                                                
                    </el-col>                           -->
                    <el-col :span="6">                              
                        <label>滚动速度：</label>
                        <span>{{screen.form.speed}}</span>
                    </el-col>
                    <el-col :span="6">                              
                        <label>放大效果：</label>
                        <span>{{screen.form.zoom}}</span>
                    </el-col>                        
                    <!-- <el-col :span="6">                               
                        <label>缩小效果：</label>
                        <span>liner</span>    
                    </el-col>                         -->
                </el-row>  
                <el-divider></el-divider> 
                <el-row>
                    <el-col :span="6">   
                        <label>播报范围：</label>
                        <span>{{screen.form.broadcastPlace}}</span>                                                                                
                    </el-col>                          
                    <el-col :span="6">                              
                        <label>播报特效：</label>
                        <span>{{screen.form.effects}}</span>
                    </el-col>
                </el-row>  
                <el-row>
                    <el-col :span="13">   
                        <label>播报样式：</label>
                        <span v-html="screen.form.broadConfig.previewHtml">{{screen.form.broadConfig.previewHtml}}</span>                                                                                
                    </el-col>                          
                    <el-col :span="2">
                        <el-link type="primary" icon="el-icon-edit" @click.stop="alterBroadStyle(1,screen.form.broadConfig,screen.id,null,screen.fields)">修改</el-link>                            
                    </el-col>                       
                </el-row>     
                <el-row>
                    <el-col :span="11">   
                        <label>无播报提示文字：</label>
                        <span v-html="screen.form.noneBroadRem.previewHtml">{{screen.form.noneBroadRem.previewHtml}}</span>                                                                                
                    </el-col>                          
                    <el-col :span="2"> 
                        <el-link type="primary" icon="el-icon-edit" @click.stop="alterNoneBroadRem(screen.form.noneBroadRem,screen.id)">修改</el-link>                            
                    </el-col>                    
                </el-row> 
                <div v-for="(aggre,index) in screen.aggregation" :key="aggre.id">
                    <el-divider></el-divider> 
                    <el-row>
                        <el-col :span="6"> 
                            <label>聚合设置：</label>
                            <span>{{aggre.fieldName}}</span>
                            <span>{{aggre.fieldsType}}</span>
                        </el-col>
                        <el-col :span="4"> 
                            <label>位置：</label>
                            <span>{{aggre.fieldsPosition}}</span>
                        </el-col> 
                        <el-col :span="7" class="overflowStyle"> 
                            <span v-html="aggre.previewHtml">{{aggre.previewHtml}}</span>
                        </el-col>
                        <el-col :span="2"> 
                            <el-link type="primary" icon="el-icon-edit" @click="alterBroadStyle(2,aggre.domains,screen.id,index,screen.fields)">修改</el-link>
                        </el-col>                                                
                    </el-row>                      
                </div>                                                                   
            </div>
        </div>   
        <modal :visible="styleModal" :width="900" @close="styleModal = false" class="data-modal" title="样式设置"> 
            <styleSetting :toChildData="configData" @sendiptVal ='changeBroadStyle'></styleSetting>
        </modal> 
        <modal :visible="noneBroadModel" :width="750" @close="noneBroadModel = false"> 
            <div style="height:250px;padding:20px 30px;">
                <styleSettingTwo :toChild="noneBroadStyle" @changeMsg='changeNoneBroadStyle'></styleSettingTwo>
            </div>
        </modal>                                        
    </div>
</template>

<script>
    import styleSetting from './styleSetting';
    import styleSettingTwo from './styleSettingTwo';
    import bgImage from '../../../../../assets/imgs/fj.jpg';  
    import { configMerge } from '@/utils/pageConfig';
    import { getSSPosition,getAggrPostion } from '@/utils/position';
    import { deepCopy } from '@/utils/util';
    // import conf from '../../../../../utils/dataSourceConfig';    
    export default {
        name: 'screenList',
        inject:['modifi','delData'], //修改
        components: {
            styleSetting,
            styleSettingTwo
        },        
        data() {
            return {
                screenDataList:[],
                scrollScreenList: [], //滚屏数据列表
                status:false,
                styleModal:false,
                noneBroadModel:false,
                configData:{},
                noneBroadStyle:{},
                currId:"",  
                // conf: conf                
            }
        },
        created() {
            if(this.$route.path.indexOf('add') === -1){
                this.selectSceneData();
            }
        },        
        mounted() {},
        methods: {
            modifiDialog(modifi,screenData){ //修改场景数据
                this.modifi(modifi,screenData);
            }, 
            delSenceData(id){ //删除场景数据
                this.delData(id);
            },           
            selectSceneData(){ //查询场景数据
                // console.info(this.$route.path.replace(/[^0-9]/ig,""),"页面Id");
                let param = { pageidBigint:null};
                if(this.$route.path.indexOf('add') > -1){
                    return false;
                }else{
                    param.pageidBigint = parseInt(this.$route.name)
                }  
                this.$api.post('/stScenepage/scenePageView',param,response => {    
                    this.screenDataList = deepCopy(response)                                                                                 
                    this.$bus.$emit('nameRefresh', this.screenDataList.name) 
                    this.$bus.$emit('latestData', this.screenDataList)
                    // console.info(this.screenDataList);                
                    this.disposeData();
                }, fal => {
                    this.$message.error(fal);
                });                            
            },
            disposeData(){ //处理数据
                // console.info(this.screenData,"查询结果");
                this.scrollScreenList = [];
                if(this.screenDataList.elements.length>0){
                    this.screenDataList.elements.forEach((curr, i) => {
                        if(curr.type === "ss"){
                            // console.info(curr,'当前',i);
                            let element = deepCopy(curr),reg = /、$/gi,cssStyle;
                            if(element.form.broadcastPlace!==undefined){
                                element.mainName = element.form.broadcastPlace + element.form.type;
                            }else{
                                element.mainName = "";  
                            }                            
                            // element.form = curr.form;
                            if(element.form.isEnterData === undefined){
                                element.form.isEnterData = false;
                            }
                            // element.aggregation = curr.aggregation;
                            element.bgImage = bgImage,
                            element.screenEffect= {
                                name: '',
                            }, 
                            // element.fields = curr.fields;
                            // element.id = curr.id;
                            element.fieldsName = '';
                            // element.name = curr.name;
                            // element.elements = curr.elements;                        
                            element.fields.forEach((field, ii) => {
                                let type;
                                if(field.fieldOptions =="number"){
                                    type = "数字";
                                }else if(field.fieldOptions =="text"){
                                    type = "字符"
                                }else{
                                    type = "日期"
                                } 
                                element.fieldsName += field.name +'('+ type + ')'+'、';
                            }) 
                            element.fieldsName = element.fieldsName.replace(reg,"");
                            element.pageId = this.$route.name;
                            element.sceneId = this.$route.query.sceneId;
                            element.type = "ss";
                            element.num = i + 1;
                            cssStyle = configMerge();
                            if(element.css === undefined){
                                element = configMerge(element);                                                                
                                let WHs = getSSPosition(element.form.broadcastPlace,this.screenDataList.scene.screenHeight,this.screenDataList.scene.screenWidth);
                                element.css.width = WHs.width;
                                element.css.height = WHs.height;
                                element.css.left = WHs.left;
                                element.css.top = WHs.top; 
                                element.css.zIndex = i;                                 
                            }else if(cssStyle.css.height === element.css.height && cssStyle.css.width === element.css.width&&cssStyle.css.left === element.css.left&&cssStyle.css.top === element.css.top){
                                    let WHs = getSSPosition(element.form.broadcastPlace,this.screenDataList.scene.screenHeight,this.screenDataList.scene.screenWidth);
                                    element.css.width = WHs.width;
                                    element.css.height = WHs.height;
                                    element.css.left = WHs.left;
                                    element.css.top = WHs.top; 
                                    element.css.zIndex = i;  
                            }
                            // if(element.properties === undefined){ 
                            //     element.properties = {};
                            // }                                            
                            this.scrollScreenList.push(element);
                            // this.addStyleSheet(element.form.broadConfig.domains,element.form.noneBroadRem.fontFamily);
                            this.$bus.$emit('getScreenData', deepCopy(this.scrollScreenList))
                            console.info(this.scrollScreenList,'场景数据');
                        }
                    })                    
                }   
            },
            // 添加字体css
            // addStyleSheet(domains,fontFamily) {
            //     if(fontFamily){
            //         let fileHost = this.conf.fontList.find(f => {                    
            //             return f.id === fontFamily.id
            //         }); 
            //         if(!fileHost) return;
            //         let cssString = "@font-face{font-family:" + fontFamily.fontFamily + ";src: url(" + fileHost.name + ");}";
            //         let b = document.getElementsByTagName("style")[0],
            //             c = document.createTextNode(cssString);
            //         b.appendChild(c)                    
            //     } 
            //     if(domains.length>0){
            //         domains.forEach((item, i) => {                        
            //             let fileHost1 = this.conf.fontList.find(f => {                    
            //                 return f.id === item.fontId
            //             }); 
            //             if(!fileHost1) return;
            //             let cssS = "@font-face{font-family:" + item.fontFamily + ";src: url(" + fileHost1.name + ");}";
            //             let b1 = document.getElementsByTagName("style")[0],
            //                 c1 = document.createTextNode(cssS);
            //             b1.appendChild(c1)                                                 
            //         })
            //     }                       
            // },           
            alterNoneBroadRem(noneBroadRem, crurId){ //修改无播报样式
                this.noneBroadStyle = noneBroadRem;
                this.noneBroadStyle.alterType = true;
                this.currId = crurId;
                this.noneBroadModel = true;
            }, 
            alterBroadStyle(type, broadConfig, crurId, index, currFields){ //修改播报样式
                this.currId = crurId;
                if(type == 1){
                    this.configData = broadConfig;
                    this.configData.type = type; 
                    this.configData.fields = currFields;                   
                }else{
                    let param = {};
                        param.id = index;
                        param.type = type;
                        param.fields = currFields;
                    if(broadConfig){
                        param.domains = broadConfig
                    }else{
                        param.domains = []
                    }
                    this.configData = param;                       
                }
                this.styleModal=true;
            },
            changeBroadStyle(val){ 
                let successFlag = false;
                if(val.type == 1){  //修改播报样式
                    successFlag = this.scrollScreenList.find(item => { 
                        if(item.id === this.currId){
                            item.form.broadConfig = val;
                            item.form.broadMsg = val.previewHtml; 
                            return true;
                        }                  
                    });                      
                }else{ //修改聚合函数样式
                    successFlag = this.scrollScreenList.find(item => { 
                        if(item.id === this.currId){
                            let source = item.aggregation;
                            source.forEach((aggr, index) => {
                                if (index === val.index) { 
                                    aggr.domains = val.domains;
                                    aggr.previewHtml = val.previewHtml;
                                    aggr.realContent = val.realContent;
                                }
                            })
                            return true;
                        }                  
                    });                                     
                }
                if(successFlag){
                    this.$emit("savePageData", true, undefined, deepCopy(this.scrollScreenList))
                    this.styleModal = false;
                }
            },
            changeNoneBroadStyle(val){ //修改无播报样式
                let successFlag = this.scrollScreenList.find(item => { 
                    if(item.id === this.currId){
                        item.form.noneBroadRem = val;                        
                        return true;
                    }                  
                });
                if(successFlag){
                    this.$emit("savePageData", true, undefined, deepCopy(this.scrollScreenList))
                    this.noneBroadModel = false;
                }                
            }            
        }
    }
</script>
<style scoped lang="scss">
.scrollScreenList{
    a{
        margin-right: 20px;
        font-size: 12px;
    }
    .el-divider--horizontal{
        margin: 15px 0;
    }
    .el-row{
        margin: 15px 0px;
    } 
    .overflowStyle{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    } 
    .el-icon-edit{
        color:#1994fa;
    }          
    .scroll_screen{
        padding: 0px;
        margin: 20px; 
        background: #f5f7fa; 
        border-radius: 10px;
        border: 1px solid #ddd;
        .scroll_screen_title{
            width: 100%;
            border-bottom: solid 1px #dfe2e6;
            padding: 3px 0 0 20px;
            .scroll_type{
                font-size: 18px;
                font-weight: 600;
            }
        }
        .scroll_screen_content{
            width: 100%;
            padding: 10px 20px;
            label{
                color:#909399;
            }
        }
    }
}
</style>